<template>
	<div>
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
			<el-form ref="appDialogFormRef" :rules="rules" :model="state.ruleForm" size="default" label-width="90px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="应用名称" prop="name">
							<el-input v-model="state.ruleForm.name" placeholder="请输入应用名称" clearable></el-input>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="应用CDN" prop="cdnUrl">
							<el-input v-model="state.ruleForm.cdnUrl" placeholder="请输入应用CDN" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="应用版本" prop="version">
							<el-input v-model="state.ruleForm.version" placeholder="请输入应用版本" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="copyright" prop="copyright">
							<el-input v-model="state.ruleForm.copyright" placeholder="请输入应用copyright" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="copytime" prop="copytime">
							<el-input v-model="state.ruleForm.copytime" placeholder="请输入应用copytime" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="应用logo" prop="logo">
							<div class="choice-image choice-image-delete" @click="FileChoiceRef.openFileChoiceDialog">
								<el-image v-if="state.ruleForm.logo != ''" :src="STATIC_URL + state.ruleForm.logo" fit="contain" />
								<SvgIcon v-else name="ele-Plus"></SvgIcon>

								<div class="delete-content" @click.stop="state.ruleForm.logo = ''" v-if="state.ruleForm.logo != ''">
									<SvgIcon name="ele-DeleteFilled"></SvgIcon>
								</div>
							</div>

							<!-- <div class="image cursor-pointer" @click="FileChoiceRef.openFileChoiceDialog">
								<el-image v-if="state.ruleForm.logo != ''" :src="STATIC_URL + state.ruleForm.logo" fit="contain" />
								<SvgIcon v-else name="ele-Plus"></SvgIcon>
							</div> -->
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit(appDialogFormRef)" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
		<FileChoice ref="FileChoiceRef" @choiceFile="choiceFile"></FileChoice>
	</div>
</template>

<script setup lang="ts" name="AppDialog">
import { reactive, ref, nextTick, defineAsyncComponent } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { STATIC_URL } from '/@/utils/config';
import { AppApi } from '/@/api/shop/app';
import msg from '/@/utils/messageUtils';
const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const appDialogFormRef = ref();
let FileChoiceRef = ref();
const state = reactive({
	ruleForm: {
		id: '',
		logo: '',
		name: '',
		cdnUrl: '',
		version: '',
		copyright: '',
		copytime: '',
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});

const rules = reactive<FormRules>({
	logo: [{ required: true, message: '请上传应用logo', trigger: 'blur' }],
	name: [{ required: true, message: '请输入应用名称', trigger: 'blur' }],
	version: [{ required: true, message: '请输入应用版本', trigger: 'blur' }],
});

const onCancel = () => {
	state.dialog.isShowDialog = false;
};

const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid) => {
		if (valid) {
			try {
				if (state.dialog.type === 'add') {
					await AppApi().create(state.ruleForm);
				} else {
					await AppApi().update(state.ruleForm);
				}
				msg().success('success');
				closeDialog();
				emit('refresh');
			} catch (e) {
				msg().error('新增失败');
			}
		}
	});
};

// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

const openDialog = (type: string, id: string) => {
	if (type === 'edit') {
		state.dialog.title = '修改app信息';
		state.dialog.submitTxt = '修 改';
		state.dialog.type = 'edit';
		state.ruleForm.id = id;
		console.log('id: ', id);
		AppApi()
			.view(id)
			.then((res) => {
				const { data } = res;
				state.ruleForm = data;
			})
			.catch((e) => {
				msg().error('获取信息失败，请稍后重试');
			});
	} else {
		state.dialog.title = '新增app应用';
		state.dialog.submitTxt = '新 增';
		state.dialog.type = type;
		nextTick(() => {
			appDialogFormRef.value.resetFields();
		});
	}
	state.dialog.isShowDialog = true;
};

let choiceFile = (res: any) => {
	state.ruleForm.logo = res[0].visitRelativePath;
};
defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.image {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	border: 1px dashed var(--el-border-color-darker);
}
</style>
